<template>
  <a-card
    hoverable
    :style="{ marginBottom: '20px' }"
    style="width: 60vw; background: #ffffff; margin: 0 auto"
  >
    <div
      :style="{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }"
    >
      <span
        :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
      >
        <img :src="userVo.userAvatar" style="width: 40px; border-radius: 50%" />
        <a-space :direction="'vertical'">
          <a-typography-text>{{ props.userVo.userName }}</a-typography-text>
          <a-typography-text style="color: #898989; font-size: 10px">{{
            props.userVo.createTime
          }}</a-typography-text>
        </a-space>
      </span>
      <a-link>More</a-link>
    </div>
    <div>
      <MdView :value="postVo.content" />
    </div>
    <div
      style="
        margin-top: 10px;
        box-shadow: 0.5px 0.5px 0.5px antiquewhite;
        display: flex;
      "
    >
      <div class="icon-hover">
        <span class="icon"><icon-heart /></span><span>喜欢</span>
      </div>
      <div class="icon-hover">
        <span class="icon" @click="clickComment"><icon-message /></span> 评论
      </div>
      <div class="icon-hover">
        <span class="icon"><IconShareInternal /></span> 更多
      </div>
    </div>
  </a-card>
  <!--  评论-->
  <div v-show="showComment">
    <!--      // 发表评论-->
    <a-card style="width: 57.5vw; margin: 0 auto; padding: 15px" hoverable>
      <a-form :model="addPost" :layout="'vertical'" @submit="handleSubmit">
        <a-form-item field="isRead" label-col-style="30vw">
          <a-textarea
            v-model="addPost.content"
            placeholder="发表评论"
            :auto-size="{
              maxRows: 3,
              minRows: 2,
            }"
            allow-clear
          />
        </a-form-item>
        <a-form-item style="text-align: right">
          <a-button html-type="submit" style="float: right">提交</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card
      style="width: 57.5vw; margin: 0 auto; padding: 15px"
      hoverable
      v-for="comment in comments"
      :key="comment.id"
    >
      <div style="display: flex; flex-wrap: wrap">
        <div style="display: flex; flex-wrap: nowrap">
          <img
            :src="comment.userAvatar"
            style="width: 50px; border-radius: 50%"
          />
        </div>
        <div
          style="
            display: flex;
            width: 80%;
            height: 18px;
            align-items: center;
            flex-wrap: wrap;
            line-height: 1.5em;
          "
        >
          <div class="title-comment" style="font-size: 18px">
            {{ comment.userName }}
          </div>
          <div class="title-comment comment-time">{{ comment.createTime }}</div>
          <div
            class="content"
            style="
              width: 100%;
              font-size: 12px;
              height: 16px;
              flex-wrap: wrap;
              margin-left: 10px;
            "
          >
            {{ comment.content }}
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
const postVo = {
  content: "我是一个放浪不羁的人",
};
const userVo = {
  userName: "gx",
  userAvatar:
    "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp",
  createTime: "2024-8-16",
};
</script>

<script setup lang="ts">
import { withDefaults, defineProps, ref, reactive } from "vue";
import MdView from "@/components/MdView.vue";
import {
  PostAddRequest,
  PostControllerService,
  PostVO,
  UserVO,
} from "../../generated";
import { Message } from "@arco-design/web-vue";

const comments = reactive([
  {
    id: 1,
    userName: "gx",
    createTime: "2014",
    content: "卧槽我也是",
    userAvatar:
      "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp",
  },
  {
    id: 2,
    userName: "gx",
    createTime: "2014",
    content: "卧槽我也是",
    userAvatar:
      "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp",
  },
  {
    id: 3,
    userName: "杜梦涵",
    createTime: "2014",
    content: "卧槽我也是",
    userAvatar:
      "https://cdn.acwing.com/media/user/profile/photo/68476_sm_1c71788bcd.jpg",
  },
]);
interface Props {
  postVo: PostVO;
  userVo: UserVO;
}
const props = withDefaults(defineProps<Props>(), {
  postVo: postVo,
  userVo: {
    userName: "gx",
    userAvatar:
      "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp",
    createTime: "2024-8-16",
  },
});

const showComment = ref(false);
const addPost = ref({} as PostAddRequest);
const searchParams = {
  pageSize: 5,
  current: 1,
};
const loads = async (current: number) => {
  const res = await PostControllerService.listMyPostVoByPageUsingPost({
    ...searchParams,
    current,
  });
  if (res.code !== 0) {
    Message.success("数据加载成功");
    comments.values = res.message;
  } else {
    Message.error("提交失败");
  }
};
const clickComment = () => {
  showComment.value = showComment.value ? false : true;
  if (showComment.value === true) {
    loads();
  }
};
const handleSubmit = async () => {
  console.log(addPost.value);
  const res = await PostControllerService.addPostUsingPost(
    addPost as PostAddRequest
  );
  if (res.code !== 0) {
    Message.success("评论成功");
    comments.unshift({
      userName: userVo.userName,
      createTime: "刚刚",
      content: addPost.value.content,
      userAvatar: userVo.userAvatar,
    });
  } else {
    Message.error("提交失败");
  }
};
</script>

<style scoped>
.icon-hover {
  display: flex;
  width: 33%;
  justify-content: center;
}
.icon-comment {
  display: flex;
  width: 33%;
  justify-content: center;
  justify-items: center;
}
.icon-hover:hover {
  color: #2aabd2;
}

.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}
.action:hover {
  background: var(--color-fill-3);
}
.title-comment {
  display: inline-block;
  margin-left: 10px;
}
.comment-time {
  color: #898989;
  font-size: 10px;
}
</style>
